<template>
    <div>
        <div class="menu_search">
            <div class="input">
                <i class="iconfont icon-B1"></i>
                <input type="text" placeholder="受尽羞辱的我不向魔堕仙子屈服" v-model="text" @keydown="textIsSet"
                    @blur="focusState = false" v-focus="focusState" />
            </div>

            <router-link to="/home" tag="div" class="back"> 取消</router-link>



        </div>
        <!-- 历史记录 -->
        <div class="history">
            <div class="historyName">历史记录</div>
            <div class="historylist" v-for="(item, index) in historyList" :key="index">
                <span @click="name">{{ item.name }}</span>
                <i class="iconfont icon-cuowu" @click="del(index)"></i>
            </div>
        </div>
        <div class="book_list" v-show="isShow" v-for="(item, index) in list" :key="index">
            <ul class="book_bk_qs1 ">
                <router-link tag="a" :to="'./BookContent?id=' + item.id">
                    <li><img :src="item.imc">
                        <div>战斗 / 运动 / 倒追 / 女性主角 /</div>
                    </li>

                    <li>

                        <div id="listtitle">{{ item.name }}</div>
                        <div style="  display: flex;">
                            <span class="iconfont icon-aixin1"
                                style="font-size: 14px;margin-right: 0px; width: 12px;color:#FBDC04; "
                                v-for="it in item.orangeNum" :key="it"></span>
                        </div>


                        <div class="zuozhe">{{ item.author }}/玄幻</div>
                    </li>
                </router-link>
            </ul>

        </div>
        <div class="Content_Frame1" style="overflow:hidden;"  v-show="!isShow" >
        <ul class="fenlei">
          <li>
            <router-link tag="a" to="/seru"><img src="../assets/images/分类.png"></router-link><br>
          </li>
          <li>
            <router-link tag="a" to="/seru"><img src="https://rs.sfacg.com/web/m/images/phb_02.png"></router-link><br>
          </li>
          <li>
            <router-link tag="a" to="/seru"><img src="https://rs.sfacg.com/web/m/images/phb_03.png"></router-link><br>
          </li>
          <li>
            <router-link tag="a" to="/seru"><img src="https://rs.sfacg.com/web/m/images/phb_04.png"></router-link><br>
          </li>
          <li>
            <router-link tag="a" to="/seru"><img src="https://rs.sfacg.com/web/m/images/phb_05.png"></router-link><br>
          </li>
          <li>
            <router-link tag="a" to="/seru"><img src="https://rs.sfacg.com/web/m/images/phb_06.png"></router-link><br>
          </li>
         

        </ul>
      </div>
    </div>
</template>




<script lang="ts">
import { getImg, getFus, getJsonData } from '@/api/home';

export default {
    data() {
        return {
            text: "",
            show: false,
            newVip: null,
            historyList: [],
            list: [],
            inputValue: "",
            cartoonList: [],
            isShow: false,
            focusState: false,
            newAll: []
        };
    },

    mounted() { },

    methods: {







        //搜索
        textIsSet(e) {
            this.list = [];
            if (this.text == "") {

                if (e.keyCode == 13) {
                    console.log(this.text = '受尽羞辱的我不向魔堕仙子屈服');
                }
            } else {
                if (e.keyCode == 13) {
                    // this.historyList.unshift(this.text)







                    this.$store.commit("historyFun", { name: this.text });
                    console.log("his=>", this.historyList);





                    //    localStorage.setItem("historyList", JSON.stringify(this.historyList));  //新数组储存


                    // 拷贝 读取json文件

                    this.cartoonList.sfAll.map((item) => {
                        // console.log("item=>",item);

                        console.log("item.indexOf(this.text)=", item.name.indexOf(this.text))
                        if (item.name.indexOf(this.text) !== -1) {
                            this.list.push(JSON.parse(JSON.stringify(item)));



                        } else {
                            // this.isShow=false
                            this.isShow = true;
                        }

                    })
                    // console.log(" this.isShow", this.isShow );
                    // console.log("list=>",this.list);
                    this.text = "";
                }
            }
        },
        //去重方法封装 

        //删除
        del(index) {
            // this.historyList.splice(index, 1)
            this.$store.commit("delhistoryFun", index)

        },
        //点击历史的
        name(e) {
            this.text = e.target.innerText
            this.focusState = true
        },
    },
    created() {
        // console.log('this.historyList=>', this.historyList);

        this.$emit("hidenavson");
        // console.log(this.historyList);
        this.historyList = this.$store.state.historyList;

        getImg().then((data) => {
            this.cartoonList = data;

            // console.log("=>", this.cartoonList.sfAll);
        });
    },
    beforeDestroy() {
        this.$emit("shownavson");
    },
    directives: {
        focus: {
            //根据focusState的状态改变是否聚焦focus
            update: function (el, value) {    //第二个参数传进来的是个json
                if (value) {
                    el.focus()
                }
            }
        }
    },
    beforeRouteLeave(to, from, next) {
        if (to.name === "BookContent") {
            this.$store.commit("newCachePath", to.path.split("/"));
            console.log(this.$store.state.cachePath);
        }
        next();
    },
    computed: {},
};
</script>








<style lang="scss">
book_list {
    margin-top: 100px;
}

.back {
    padding: 0 17.55px 0 22px;

}

.input {

    width: 75%;
    position: relative;
    display: flex;
    align-items: center;
    padding-left: 5px;

    i {
        position: absolute;
        font-size: 20px;
        padding-left: 10px;
        color: black;
    }

    input {
        color: #68685f;
        width: 100%;
        padding: 6px 0;
        border-radius: 15px;
        border: transparent;
        background-color: #eff0f2;
        text-indent: 38px;
    }
}

.history {
    border-bottom: 1px solid #e2e2e2;
    padding-top: 20px;
    padding-bottom: 10px;
    margin: 0 8px;

    .historyName {
        padding-left: 15px;
        font-size: 14px;
        color: #666;
        padding-bottom: 10px;
    }

    .historylist {
        display: flex;
        justify-content: space-between;
        padding: 0 16px 10px 16px;
    }
}
</style>